<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>10s 倒计时-单次定时</title>
    <style>
        #box{
            width: 200px;
            height: 50px;
            line-height: 50px;
            border: 1px solid #000;
            font-size: 50px;
            color: #f00;
            font-weight: 700;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>10s 倒计时-单次定时</h1>
    <button onclick="strat()">开始</button>
    <hr>
    <div id="box">10</div>

    <script>
        var m = 10;
        function strat(){
            var div = document.getElementById('box');
            // console.log(box);
            m--;
            div.innerHTML = m;
            if (m <= 0) {
                // console.log(t1);
                // 清除定时
                // clearTimeout(t1); // 无法清除已经过期的时间
                return;
            }
            t1 = setTimeout('strat()', 500);
            // console.log(t1);
        }
    </script>
    

</body>
</html>